<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 订单列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="编号" class="handle-input mr10">
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="pid" label="编号" width="55" align="center">
					<template slot-scope="scope">{{scope.row.pid}}</template>
				</el-table-column>
				<el-table-column prop="pname" label="商品名称">
					<template slot-scope="scope">{{scope.row.pname}}</template>
				</el-table-column>
				<el-table-column label="商品价格" prop="pprice">
					<template slot-scope="scope">¥ {{scope.row.pprice}}</template>
				</el-table-column>
				<el-table-column label="图片(查看大图)" align="center" prop="pimg">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="scope.row.pimg" :preview-src-list="[scope.row.pimg]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="pdesc" label="商品描述">
					<template slot-scope="scope">{{scope.row.pdesc}}</template>
				</el-table-column>
				<el-table-column label="用户账号">
					test
				</el-table-column>
				<el-table-column label="支付方式">
					<template slot-scope="scope">{{scope.row.uid | formatPayType}}</template>
				</el-table-column>
				<el-table-column label="订单来源">
					<template slot-scope="scope">{{scope.row.uid | formatSourceType}}</template>
				</el-table-column>
				<el-table-column label="订单状态">
					<template slot-scope="scope">{{scope.row.uid | formatStatus}}</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button
							type="text"
						  icon="el-icon-goods"
						  @click="handleEdit(scope.$index, scope.row)"
						>查看订单</el-button>
						<el-button
						type="text"
						  icon="el-icon-delete"
						  class="red"
						  @click="handleCloseOrder(scope.$index, scope.row)"
						  v-show="scope.row.uid==='26029'">关闭订单</el-button>
						<el-button
						  type="text"
						  icon="el-icon-mobile"
						  @click="handlefahuoOrder(scope.$index, scope.row)"
						  v-show="scope.row.uid==='19802'">订单发货</el-button>
						<el-button
						type="text"
						  icon="el-icon-mobile"
						  @click="handleViewLogistics(scope.$index, scope.row)"
						  v-show="scope.row.uid==='25918'||scope.row.uid==='26032'">订单跟踪</el-button>
						<el-button
							type="text"
						  icon="el-icon-delete"
						  class="red"
						  @click="handleDel(scope.$index, scope.row)"
						  v-show="scope.row.uid==='24256'">删除订单</el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>
		<!-- auto-complete="off" -->
		<!--查看订单界面-->
		<el-dialog title="查看订单"  :visible.sync="dialogVisible"  :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="商品名称">
					<el-input v-model="editForm.pname" ></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="editForm.pprice" ></el-input>
				</el-form-item>
				<el-form-item label="图片地址">
					<el-input v-model="editForm.pimg" ></el-input>
				</el-form-item>
				<el-form-item label="商品描述">
					<el-input type="textarea" v-model="editForm.pdesc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
			</div>
		</el-dialog>
		
		
		<!--搜索界面-->
		<el-dialog title="搜索" :visible.sync="searchdialogVisible" :close-on-click-modal="false">
			<el-form :model="searchForm" label-width="80px" :rules="searchFormRules" ref="searchForm">
				<el-form-item label="商品名称">
					<el-input v-model="searchForm.pname" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="searchForm.pprice" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="图片地址">
					<el-input v-model="searchForm.pimg" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品描述">
					<el-input type="textarea" v-model="searchForm.pdesc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="searchdialogVisible = false">取消</el-button>
				
			</div>
		</el-dialog>
		<!-- 分页 -->
		<el-pagination
			  @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page.sync="listQuery.pagenum"
		      :page-size="5"
			  :page-sizes="[5,10,15]"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		<logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
		
		
		
		
		
		
		
		
	</div>
</template>

<script>
	import {formatDate} from '../../utils/date';
	import * as api from '../../api/getshangpinlist'
	// import util from '../../utils/utils'
	import LogisticsDialog from './logisticsDialog';
	import axios from 'axios'
	let token=localStorage.getItem('token')
	const defaultListQuery = {
	 pagenum: 3,
	 pagesize: 5,
	  orderSn: null,
	  receiverKeyword: null,
	  status: null,
	  orderType: null,
	  sourceType: null,
	  createTime: null,
	};
	export default {
		name: 'dingdanlist',
		components:{LogisticsDialog},
		data() {
			return {
				logisticsDialogVisible:false,
				listQuery: Object.assign({}, defaultListQuery),
				statusOptions: [
				  {
				    label: '待付款',
				    value: '26038'
				  },
				  {
				    label: '待发货',
				    value: '19802'
				  },
				  {
				    label: '已发货',
				    value: '25918'
				  },
				  {
				    label: '已完成',
				    value: '26032'
				  },
				  {
				    label: '已关闭',
				    value: '24256'
				  }
				],
				sourceTypeOptions: [
				  {
				    label: 'PC订单',
				    value: '26038'
				  },
				  {
				    label: 'APP订单',
				    value: '19802'
				  }
				],
				
				
				
				query: {
					name: '',
				},
				tableData: [],
				total:'',
				listLoading: false,
				editLoading: false,
				dialogVisible:false,
				
				editFormRules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				//编辑界面数据
				editForm: {
					pid: '',
					pimg: '',
					pname: '',
					pprice: '',
					pdesc: '',
					uid:''
				},
				
				
				//查询界面数据
				searchForm: {
					
					pname: '',
					pprice: '',
					pimg: '',
					pdesc: '',
				},
				searchdialogVisible:false, //查询界面是否显示
				searchLoading: false,
				searchFormRules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				//分页
						
				        currentPage4: 1
				

		}
			
		},
		created() {
			this.getData();
		},
		mounted() {
			api.getshangpinlist({pagesize:100}).then(data => {
				this.total = data.data.data.length
			})
		},
		filters: {
			name: '',
			formatCreateTime(time) {
			  let date = new Date(time);
			  return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
			formatPayType(value) {
			  if (value === '26038') {
			    return '未支付';
			  } else if (value === '19802') {
			    return '微信';
			  } else {
			    return '支付宝'
			  }
			},
			formatSourceType(value) {
			  if (value === '19802') {
			    return 'APP订单';
			  } else {
			    return 'PC订单';
			  }
			},
			formatStatus(value) {
			  if (value === '19802') {
			    return '待发货';
			  } else if (value === '25918') {
			    return '已发货';
			  } else if (value === '26032') {
			    return '已完成';
			  } else if (value === '24256') {
			    return '已关闭';
			  } else if (value === '26029') {
			    return '无效订单';
			  } else {
			    return '待付款';
			  }
			},
		},
		
		methods: {
			// 获取 easy-mock 的模拟数据
			getData() {
				api.getshangpinlist(this.listQuery).then(data => {

					this.tableData = data.data.data
					// this.total = data.data.data.length
					// console.log(this.tableData)
				})
			},
			handleViewLogistics(index, row){
			  this.logisticsDialogVisible=true;
			  
			},
			// 分页
				handleSizeChange(val) {
					this.listQuery.pagenum = 1;
					this.listQuery.pagesize = val;
					this.getData();
				      },
			      handleCurrentChange(val) {
			       this.listQuery.pagenum = val;
			       this.getData();
			      },
			//搜索
			search:function(){
				this.searchdialogVisible = true;
				// console.log(this.editFormVisible)
				
				
				
				api.getdetaillist({id:this.query.name}).then((res) => {
						// console.log(res.data.data)
						this.searchForm = {
							
							pname: res.data.data.pname,
							pprice:res.data.data.pprice,
							pimg: res.data.data.pimg,
							pdesc:res.data.data.pdesc
						};
					
				}).catch(() => {
				
				});
			},
			//关闭订单 handleCloseOrder
			handleCloseOrder: function(index, row) {
				this.$confirm('确认关闭订单吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = {
						pid: row.pid,
						uid:26038,
						token:token
					};
					api.getdeletelist(para).then((res) => {
						// console.log(res.data)
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '关闭成功',
							type: 'success'
						});
						this.getData();
					});
				}).catch(() => {
				
				});
				
			},
			//删除订单
			handleDel: function(index, row) {
				this.$confirm('确认删除订单吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = {
						pid: row.pid,
						uid:26038,
						token:token
					};
					api.getdeletelist(para).then((res) => {
						// console.log(res.data)
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getData();
					});
				}).catch(() => {
				
				});
				
			},
			// 编辑操作
			handleEdit: function(index, row) {
				this.dialogVisible = true;
				// console.log(this.editFormVisible)
				this.editForm = Object.assign({}, row);
				// console.log(this.editForm)

			},
			//发货
			handlefahuoOrder:function(){
				this.$confirm('确认发货吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					
				}).catch(() => {
				
				});
			},
			
			// 保存编辑
			editSubmit: function() {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.editForm);
							// console.log(para)
							api.getupdatelist(para).then((res) => {
								// console.log(res.data)
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getData();
							});
						});
					}
				});
			},
			
			
			


		},
		

	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
